<template>
  <el-dialog
    :title="$t('IMPORT')"
    :visible.sync="visible"
    width="450px"
    :before-close="handleClose"
    append-to-body
  >
    <slot name="notice" />
    <template slot="footer">
      <div class="flex align-center justify-end">
        <el-button class="mr-2" @click="cancel">{{ $t('CANCEL') }}</el-button>
        <el-upload
          ref="upload"
          class="upload-demo"
          action="/"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="importClick"
        >
          <el-button slot="trigger" class="ml-10" size="mini" type="primary">{{
            $t('IMPORT_FILE')
          }}</el-button>
        </el-upload>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  export default {
    name: 'ImportDialog',
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {}
    },
    created() {},
    methods: {
      importClick(file) {
        this.$emit('ImportClick', file)
      },
      handleClose() {
        console.info('handleClose')
        this.$emit('import-close')
      },
      cancel() {
        console.info('cancel')
        this.$emit('import-close')
      }
    }
  }
</script>

<style lang="scss">
  @import '@/assets/css/mixin.module.scss';
  .exportClick {
    cursor: pointer;
    @include themeify {
      color: themed('textFontColor');
    }
  }
</style>
